<template lang="pug">
  d2-container(:filename="filename")
    el-row
        el-col(:span="15")
            el-card(shadow="never")
                div(slot="header",class="clearfix")
                    span 胰岛素泵型号管理
                el-row 
                  el-col(:span="12")
                    el-form(size="mini",:inline="true")
                      el-form-item
                        submit-button(type="danger",@click="deletePumpModels",:loading="deleting")
                          i(class="el-icon-delete")
                          span 删除
                      el-form-item
                        refresh-button(:loading="querying",@click="getPumpModels")
                        
                  el-col(:span="12")
                    
                el-table(:data="paged.items",:show-overflow-tooltip="true",border,@selection-change="selectionChange")
                    el-table-column(type="selection",width="50")
                    el-table-column(prop="name",label="胰岛素泵型号")
                    el-table-column(label="胰岛素泵品牌",width="200")
                        template(slot-scope="scope") {{scope.row.pumpBrand.name}}
                    el-table-column(label="#",width="100px",align="center")
                        template(slot-scope="scope") 
                          el-button(type="text",@click="editClick(scope.row)")
                            i(class="el-icon-edit")
                            span 编辑

                awesome-pagination(:total="paged.totalCount",:page="page",@change="getPumpModels")
        el-col(:span="8",:offset="1")
            pump-model-create(@success="getPumpModels")
            div(style="padding:5px 0")
            pump-model-edit(@success="getPumpModels",:visible.sync="editVisible",:id="editId")
</template>

<script>
import Vue from "vue";
import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import axios from "@/plugin/axios";
import PageList from "@/mixins/PageList";

import PumpModelCreate from "./PumpModelCreate";
Vue.component(PumpModelCreate.name, PumpModelCreate);
import PumpModelEdit from "./PumpModelEdit";
Vue.component(PumpModelEdit.name, PumpModelEdit);

export default {
  name: "pump-model-list",
  mixins: [PageList],
  data() {
    return {
      filename: __filename,
      /**请求接口返回 */
      paged: {},
      filter: {},
      deleting: false,
      editId: null,
      editVisible: false
    };
  },
  methods: {
    getPumpModels() {
      this.querying = true;
      axios({
        method: "post",
        url: "/PumpModel/GetPumpModels",
        data: { page: this.page, filter: this.filter }
      })
        .then(paged => this.getPumpModelSuccess(paged))
        .catch(() => (this.querying = false));
    },
    getPumpModelSuccess(paged) {
      this.querying = false;
      this.paged = paged;
    },
    deletePumpModels() {
      this.isDeleteConfirm()
        .then(() => {
          this.deleting = true;
          axios({
            method: "post",
            url: "PumpModel/delete",
            data: { ids: this.selectedIds }
          })
            .then(t => {
              this.deleting = false;
              this.getPumpModels();
            })
            .catch(t => (this.deleting = false));
        })

        .catch(() => {});
    },
    editClick(row) {
      this.editVisible = true;
      this.editId = row.id;
    }
  },
  created() {
    this.getPumpModels();
  }
};
</script>
